<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% load static %}
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <link href="{% static 'fontawesomefree/css/fontawesome.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/brands.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'fontawesomefree/css/solid.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'fontawesomefree/js/fontawesome.js' %}"></script>
    <script src="{% static 'fontawesomefree/js/solid.js' %}"></script>
    <script src="{% static 'fontawesomefree/js/brands.js' %}"></script>
    <title>hello</title>
</head>
<style>
    .message {
        width: 80%;
        height: 200px;
        margin: auto auto;
        overflow-y: auto; /* 或者使用 scroll */
        border: 1px solid #000;
    }

    .send_input {
        width: 80%;
        margin: auto auto;
    }


    .vertically-centered-list {
        display: flex;
        flex-direction: row; /* 设定为垂直方向的 Flex 容器 */
        justify-content: center; /* 使得元素在垂直方向上居中 */
        height: 10%; /* 设定容器的高度，此处以视口高度为例 */
        width: 80%;
        list-style: none; /* 移除列表的默认样式 */
        padding: 0;
        margin: auto auto;
    }

    .vertically-centered-list li {
        /* 可根据需要为列表项添加额外样式 */
        float: left;
        margin-top: 5%;
        padding: 10px;
        width: 200px;
        background: rgba(53, 184, 119, 0.2);
        text-align: center;
        margin-right: 1px; /* 可选，增加列表项之间的间距 */
        border: 1px solid #000810;
    }
</style>
<body>
<div class="vertically-centered-list">
    <li>
        <h3 id="device_static" style="color: rgba(47,149,232,0.76)">状态</h3>
        <h5 id="device_run" style="color: rgba(28,116,48,0.7)">运行</h5>
    </li>
    <li>
        <h3 id="device_pressure" style="color: rgba(47,149,232,0.76)">压力</h3>
        <h5 id="device_pressure_value" style="color: rgba(28,116,48,0.7)">100kpa</h5>
    </li>
    <li>
        <h3 id="device_temp" style="color: rgba(47,149,232,0.76)">温度</h3>
        <h5 id="device_temp_value" style="color: rgba(28,116,48,0.7)">35.5</h5>
    </li>
    <li>
        <h3 id="device_flow" style="color: rgba(47,149,232,0.76)">流量</h3>
        <h5 id="device_flow_value" style="color: rgba(28,116,48,0.7)">300ppm</h5>
    </li>
</div>
<div class="message" id="message"></div>
<div class="send_input">
    <label for="text"></label>
    <input type="text" placeholder="请输入" id="text">
    <input type="button" value="发送" onclick="sendMessage()">
</div>
<script>
    <!-- your_template.html -->
    let ws = new WebSocket("ws://localhost:8000/ws/12")
    //创建好后连接自动触发
    ws.onopen = function (event) {
        console.log("握手");
        let tag = document.createElement("div");
        tag.innerText = "连接成功";
        document.getElementById("message").append(tag);
        ws.send("握手成功")
    }
    //接收到数据自动触发
    ws.onmessage = function (event) {
        let obj = JSON.parse(event.data)
        // 如果JSON中有嵌套的对象或数组，你也可以继续访问它们
        if (obj.device) {
            console.log(obj.device.models); // 输出城市名称，假设address对象存在并且有一个city属性
        }
        let tag = document.createElement("div");
        tag.innerText = event.data;
        document.getElementById("message").append(tag);

        let element = document.getElementById("device_run");
        // 改变元素的内容
        console.log(obj.ping)
        {#if (obj.data === "fault") {#}
        {#    // 获取元素#}
        {#    element.innerHTML = "正常";#}
        {#    // 你也可以改变字体颜色等其他样式#}
        {#    element.style.color = "green";#}
        {#if (obj === "QHYJ100") {#}
        {#    // 改变元素的内容#}
        {#    element.innerHTML = "故障";#}
        {#    // 你也可以改变字体颜色等其他样式#}
        {#    element.style.color = "red";#}
        {#else if (obj.ping === "ping") {#}
        {#    element.innerHTML = "心跳";#}
        {#    // 你也可以改变字体颜色等其他样式#}
        {#    element.style.color = "black";#}
        {#    ws.send("ping");#}

    }
    // 连接关闭时的回调
    ws.onclose = function (event) {
        let tag = document.createElement("div");
        tag.innerText = "连接断开";
        document.getElementById("message").append(tag);
    }
    ws.onerror = function (err) {
        console.error("websocket err:" + err);
    }

    function sendMessage() {
        let tag = document.getElementById('text');
        console.log(tag.value)
        ws.send(tag.value);
    }

    function closeConn(event) {
        console.log(event.error)
        ws.close(); //断开连接
    }

</script>
</body>
</html>